<template>
  <div class="layout">
    <div class="header">
      <div>Header</div>
      <div>
        <NuxtLink to="/07_layout-nuxt">
          <button>Home</button>
        </NuxtLink>
        <NuxtLink to="/07_layout-nuxt/category">
          <button>category</button>
        </NuxtLink>
        <NuxtLink to="/07_layout-nuxt/cart">
          <button>cart</button>
        </NuxtLink>
        <NuxtLink to="/07_layout-nuxt/login">
          <button>login</button>
        </NuxtLink>
      </div>
    </div>
    <!-- 页面的内容 -->
    <slot></slot>
    <div class="footer">我是footer</div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
  .header {
    text-align: center;
    /* line-height: 80px; */
    font-size: 30px;
    background-color: red;
  }

  .footer {
    border: 1px solid green;
    text-align: center;
    /* line-height: 80px; */
    font-size: 30px;
    background-color: #cdcdcd;
  }
</style>
